<template>
  <div
    class="title-card"
    :style="{
      '--color': status?.color || '#2B8CF1'
    }"
  >
    <div class="title-card__content flex pointer">
      <el-dropdown
        trigger="click"
        @command="handleCommand"
      >
        <div class="room-name">
          {{ roomName }}<i class="el-icon-caret-bottom" />
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="(item, index) in roomList"
              :key="index"
              :command="item"
            >
              {{ item.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="divider" />
    <div class="status">{{ status?.text || '当前暂无会议' }}</div>
  </div>
</template>
<script>
export default {
  name: 'TitleCard',
  props: {
    status: {
      type: Object,
      default: () => ({})
    },
    roomName: {
      type: String,
      default: ''
    },
    roomList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  computed: {
  },
  methods: {
    handleCommand(e) {
      this.$emit('roomChange', e)
    }
  }
}
</script>
<style lang="scss" scoped>
.title-card {
  position: relative;
  text-align: center;

  &__content {
    background:
      radial-gradient(circle at bottom right, transparent 20px, var(--color) 0) bottom right,
      radial-gradient(circle at bottom left, transparent 20px, var(--color) 0) bottom left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    padding: 24px 0;
    justify-content: center;

    .room-name {
      font-size: 54px;
      font-weight: 700;
      color: #fff;
    }
  }

  .divider {
    width: calc(100% - 40px);
    height: 1px;
    margin: 0 auto;
    background-image: linear-gradient(to right, #fff 0%, #fff 50%, transparent 50%);
    background-size: 20px 1px;
    background-repeat: repeat-x;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .status {
    padding: 24px 0;
    font-size: 120px;
    font-weight: 700;
    color: #fff;
    background:
      radial-gradient(circle at top right, transparent 20px, var(--color) 0) top right,
      radial-gradient(circle at top left, transparent 20px, var(--color) 0) top left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
  }
}
</style>
